<html>
    <head>
    <link rel="stylesheet" href="defstyle.css" type="text/css" />
    <script type="text/javascript">
        function save(){
            var modselect = document.getElementById("mod");
            var mod = modselect.children[modselect.selectedIndex].value;
            localStorage["mod"] = mod;
            var smodselect = document.getElementById("smod");
            var smod = modselect.children[smodselect.selectedIndex].value;
            localStorage["smod"] = smod;
            var keyselect = document.getElementById("dkey");
            var dkey = keyselect.children[keyselect.selectedIndex].value;
            localStorage["dkey"] = dkey;
/*
            var status = document.getElementById("status");
            status.innerHTML = "Options saved.";
            setTimeout(function(){
                status.innerHTML = "";
            }, 750);*/
        }

        function load(){
            var mod = localStorage["mod"];
            console.log(mod);
            if(!mod)return;
            var modselect = document.getElementById("mod");
            for(var i = 0; i < modselect.children.length; i++){
                var child = modselect.children[i];
                if(child.value = mod){
                    child.selected = true;
                    break;
                }
            }
            var smod = localStorage["smod"];
            console.log(smod);
            if(!smod)return;
            var smodselect = document.getElementById("smod");
            for(var i = 0; i < smodselect.children.length; i++){
                var child = smodselect.children[i];
                if(child.value = smod){
                    child.selected = true;
                    break;
                }
            }
            var dkey = localStorage["dkey"];
            console.log(dkey);
            if(!dkey)return;
            var keyselect = document.getElementById("dkey");
            for(var i = 0; i < keyselect.children.length; i++){
                var child = keyselect.children[i];
                if(child.value = dkey){
                    child.selected = true;
                    break;
                }
            }

        }
    </script>

    </head>
    <body onload="load()">
        <div id="defbody">
        <div id="define_options">
            Select the shortcut:<br>
            <select id="mod">
                <option value="17">Ctrl</option>
                <option value="16">Shift</option>
                <option value="18">Alt</option>
            </select>
            <select id="smod">
                <option value="-1">None</option>
                <option value="17">Ctrl</option>
                <option value="16">Shift</option>
                <option value="18">Alt</option>
            </select>
            <select id="dkey">
                <option value="65">a</option>
                <option value="66">b</option>
                <option value="67">c</option>
                <option value="68">d</option>
            </select>
            <br>
            <br>
            <br>
            <button onclick="save()">Save</button>
        </div>
        </div>
    </body>
</html>
